<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>我的车辆</title>
    <link rel="stylesheet" href="__PUBLIC__/style/weui.css"/>
    <link rel="stylesheet" href="__PUBLIC__/style/example.css"/>
    <link rel="stylesheet" href="__PUBLIC__/style/swiper.min.css">
    <link rel="stylesheet" href="__PUBLIC__/style/sweetalert.css">
</head>
<body ontouchstart>
<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <!-- header -->
            <!--<div class="header home-header parking_header" style="background-color: #f5f5f5">-->
                <!--<a href="{:U('Index/Index')}" class="icon iconfont header-left">&#xe62c;</a>-->
                <!--<h1>我的车辆</h1>-->
                <!--<a href="jacascript::void(0)" class="icon iconfont header-right">&emsp;</a>-->
            <!--</div>-->
            <!-- header end-->
            <div class="weui-tab__panel">
                <!-- header -->
                <div class="add-header">
                    <div class="header-left" id="areaPicker">
                        <span>沪</span> <i class="icon iconfont icon-xiala"></i>
                    </div>
                    <div class="header-left" id="letterPicker">
                        <span>A</span> <i class="icon iconfont icon-xiala"></i>
                    </div>
                    <div class="weui-input-box">
                        <input class="weui-input" id="carNo" type="text" placeholder="请输入车牌号" maxlength="5">
                    </div>
                    <div class="right-btn-box">
                        <button class="weui-btn" id="addBtn">新增车辆</button>
                    </div>
                </div>
                <!-- header end-->
                <div class="weui-panel weui-panel_access">
                    <div class="weui-panel__bd">
                        <volist name="cars" id="car">
                            <div class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd" name="carView" data-val="{$car['carno']}">
                                    <img class="weui-media-box__thumb" src="__PUBLIC__/images/pro.png" alt="">
                                </div>
                                <div class="weui-media-box__bd">
                                    <h4 class="weui-media-box__title">{$car['carno']|mb_substr=0,2,'utf-8'}  {$car['carno']|mb_substr=2,5,'utf-8'}</h4>
                                    <div class="weui-media-box__desc"><button class="weui-btn weui-btn_primary" name="release" data-val="{$car['carno']}">解除绑定</button></div>
                                </div>
                            </div>
                        </volist>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialogs">
    <!--BEGIN dialog1-->
    <div class="js_dialog" id="RelieveDialog" style="opacity: 0; display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">是否解除车辆：<br><span class="bule_text" id="carTxt">沪C 12345</span> <br>的绑定？</div>
            <div class="weui-dialog__ft">
                <button class="weui-dialog__btn weui-btn" id="releaseBtn">解除绑定</button>
                <button class="weui-dialog__btn weui-btn">按错了</button>
            </div>
        </div>
    </div>
    <!--END dialog1-->

    <!--BEGIN dialog2-->
    <div class="js_dialog" id="unCartDialog" style="opacity: 0; display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">未检索到车辆<br>入库信息</div>
            <div class="weui-dialog__ft">
                <button class="weui-dialog__btn weui-btn big_btn">我知道了</button>
            </div>
        </div>
    </div>
    <!--END dialog2-->
</div>

<script src="__PUBLIC__/js/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="__PUBLIC__/js/swiper.min.js"></script>
<script src="__PUBLIC__/js/sweetalert.min.js"></script>
<script>
    areaData=[{value:1,label:'京'},
        {value:2,label:'沪'},
        {value:3,label:'津'},
        {value:4,label:'渝'},
        {value:5,label:'冀'},
        {value:6,label:'豫'},
        {value:7,label:'云'},
        {value:8,label:'辽'},
        {value:9,label:'黑'},
        {value:10,label:'湘'},
        {value:11,label:'皖'},
        {value:12,label:'鲁'},
        {value:13,label:'新'},
        {value:14,label:'苏'},
        {value:15,label:'浙'},
        {value:16,label:'赣'},
        {value:17,label:'鄂'},
        {value:18,label:'桂'},
        {value:19,label:'甘'},
        {value:20,label:'晋'},
        {value:21,label:'蒙'},
        {value:22,label:'陕'},
        {value:23,label:'吉'},
        {value:24,label:'闽'},
        {value:25,label:'贵'},
        {value:26,label:'粤'},
        {value:27,label:'川'},
        {value:28,label:'青'},
        {value:29,label:'藏'},
        {value:30,label:'琼'},
        {value:31,label:'宁'}];
    //区域选择
    $('#areaPicker').on('click', function () {
        var _this=$(this);
        weui.picker(areaData, {
            onChange: function (result) {
                //console.log(result);
            },
            onConfirm: function (result) {
                areaData.forEach(function(e){
                    if(result[0]===e.value){
                        _this.children("span").text(e.label);
                    }
                })
            }
        });
    });

    letterData=[
        {value:1,label:'A'},
        {value:2,label:'B'},
        {value:3,label:'C'},
        {value:4,label:'D'},
        {value:5,label:'E'},
        {value:6,label:'F'},
        {value:7,label:'G'},
        {value:8,label:'H'},
        {value:9,label:'J'},
        {value:10,label:'K'},
        {value:11,label:'L'},
        {value:12,label:'M'},
        {value:13,label:'N'},
        {value:14,label:'P'},
        {value:15,label:'Q'},
        {value:16,label:'R'},
        {value:17,label:'S'},
        {value:18,label:'T'},
        {value:19,label:'U'},
        {value:20,label:'V'},
        {value:21,label:'W'},
        {value:22,label:'X'},
        {value:23,label:'Y'},
        {value:24,label:'Z'}];
    //区域选择
    $('#letterPicker').on('click', function () {
        var _this=$(this);
        weui.picker(letterData, {
            onChange: function (result) {
                //console.log(result);
            },
            onConfirm: function (result) {
                letterData.forEach(function(e){
                    if(result[0]===e.value){
                        _this.children("span").text(e.label);
                    }
                })
            }
        });
    });


    //弹窗
    $('#dialogs').on('click', '.weui-dialog__btn', function(){
        $(this).parents('.js_dialog').fadeOut(200);
    });

    //绑定车牌
    $('#addBtn').on('click', function(){
        var carNo = $('#carNo').val(),
            fist = $('#areaPicker').find('span').html(),
            second = $('#letterPicker').find('span').html();

        if($.trim(carNo) == ''){
            swal('请输入车牌号');
            return;
        }
        carNo = fist + second + carNo;
        $.post('{:U("park/addcar")}', {carNo: carNo}, function (o) {
            if (o.code == 200) {
                swal('绑定成功');
                setTimeout(function () {
                    location.reload();
                }, 800);
            }
            else {
                swal(o.message);
            }
        });
    });

    //是否解除绑定
    var currNo = '';
    $("button[name='release']").on('click', function(){
        currNo = $(this).attr('data-val');
        $('#carTxt').html(currNo);
        $("#RelieveDialog").fadeIn(200);
    });

    //解除车辆
    $("#releaseBtn").on('click',function() {
        $.post('{:U("park/reselase")}', {carNo: currNo}, function (o) {
            if (o.code == 200) {
                swal('解除成功');
                setTimeout(function () {
                    location.reload();
                }, 800);
            }
            else {
                swal('操作失败');
            }
        });
    });

    $('div[name=carView]').on('click',function() {
        var carNo = $(this).attr('data-val');
        $.post('{:U("park/search")}', {carNo: carNo}, function (o) {
            if (o.code == 200) {
                location.href = '/park/parkinfo?carNo=' + carNo;
            }
            else {
                $("#unCartDialog").fadeIn(200);
            }
        });
    })
</script>
</body>
</html>
